<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        /* 小广告 */
        .adver-wrapper {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            right: 5px;
            bottom: 5px;
        }

        .adver-header {
            line-height: 32px;
            position: relative;
        }

        .adver-header .adver-tips {
            font-size: 12px;
            text-indent: 13px;
        }

        .adver-header .adver-close {
            position: absolute;
            right: 5px;
            top: 0;
        }

        .adver-main img {
            width: 100%;
        }

        /* 时钟 */
        #clock-box {
            /* 父元素宽度依靠子内容撑开 */
            /* display:linne-block  -> 改变元素性质 */
            width: fit-content;
            margin: 0 auto;
            text-align: center;
            padding: 10px;
        }

        #clock-box #clock-time {
            font-size: 40px;
            line-height: 50px;
            font-family: "clockIcon";
        }

        @font-face {
            font-family: "clockIcon";
            src: url('../font/clockicons.woff2');
        }
    </style>
</head>

<body>
    <!-- vue的根实例(所有组件的父(代)组件) -->
    <div id="app">
        <!-- 如果组件需要传递数据 => 在组件使用(调用)传入(以属性的方式传入) -->
        <!-- 组件中传递的数据,可以理解为是父组件传入的 -->
        <!-- 静态属性 count="100" src="../images/bzsc-dgbhz-300-250-7-5.gif"   -->
        <adver count="100" src="../images/bzsc-dgbhz-300-250-7-5.gif"></adver>
    </div>
</body>
<template id="adverContent">
    <div class="adver-wrapper" v-if="isShowAdv">
        <div class="adver-header">
            <div class="adver-tips">距离广告关闭还有{{count1}}秒</div>
            <div class="adver-close" @click="closeHandler">x</div>
        </div>
        <div class="adver-main">
            <a href="">
                <img :src="src" alt="">
            </a>
        </div>
    </div>
</template>
<script>
    //  小广告
    //  1. 页面加载完毕 等待5s 小广告显示
    //  2. 倒计时10s后关闭小广告
    //  3. 重复1-2
    //  4. 点击关闭按钮 => 清除小广告  => 重复 1 2 3

    // 单向数据流
    // 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

    // 父子组件之间的传参时单向的, 子组件中不能直接修改父组件传递的数据 
    // 子组件会先接收父组件传递的数据 再进行初始化操作

    // 如果传入的参数是静态属性(count=100 值是定死的不会动态修改),可以根据传入的数据,在data中初始化一个新数据  => 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。


    Vue.component("adver", {
        // 如果组件内要接收参数,将所有的参数提取出来 放到props 
        // 1. 子组件会先接收父组件传递的数据 再进行初始化操作
        // 2. 子组件接收的数据也会挂载在子组件的实例化对象上 this.count  this.src
        props: ["count", "src"],  //接收父组件传递的数据

        // 一个组件的 data 选项必须是一个函数，每个实例可以维护一份被返回对象的
        data: function () {  //每次使用组件时,会调用此方法生成一个新对象 
            return {
                intervalTimer: null,
                timeOutTimer: null,
                isShowAdv: false,
                // count: 10,
                // src: "../images/bzsc-dgbhz-300-250-7-5.gif"
                count1: this.count, // 100   count1=100  => 修改count1
            }
        },
        template: "#adverContent",
        methods: {
            init() {
                this.timeOutTimer = setTimeout(() => {
                    this.isShowAdv = true;
                    this.intervalTimer = setInterval(() => {
                        this.count1--;
                        if (this.count1 <= 0) {
                            this.isShowAdv = false;
                            clearInterval(this.intervalTimer);
                            this.count1 = 10;
                            this.init();
                        }
                    }, 1000)
                }, 5000)
            },
            closeHandler() {
                clearInterval(this.intervalTimer);
                clearTimeout(this.timeOutTimer);
                this.isShowAdv = false;

                this.init();
            }
        },
        mounted() {
            this.init();
            console.log(this.count, this.src);
        }
    })

    var vm = new Vue({
        el: "#app",
        data: {

        }
    })







</script>

</html>